<template>
  <!-- 设备统计 -->
  <div class="Project-box equipmentStatistics-box">
    <div class="equiStatisTit1 publicTiTle">设备统计</div>
    <div class="equiStatisTit2 publicETiTle">设备总数</div>
    <div class="equiStatisTit3 publicETiTle">各类型设备占比</div>
    <div class="equiStatisTit4 publicTiTle">诱虫灯设备</div>
    <div class="equiStatisTit5 publicETiTle">设备反控</div>
    <div class="equiStatisUnit1 publicUnit">吨</div>
    <div class="equiStatisUnit2 publicUnit">0000000</div>
    <div class="equipmentStatistics-box1">
      <div class="Box1Item">
        <div class="Box1Itemleft">运行总数</div>
        <div class="Box1Itemright">000台</div>
      </div>
      <div class="Box1Item">
        <div class="Box1Itemleft">故障总数</div>
        <div class="Box1Itemright">000台</div>
      </div>
    </div>
    <div class="equipmentStatistics-box2">
      <div
        class="box2Item"
        v-for="(item, index) in pieChartObj.pieChartList"
        :key="index"
      >
        <div class="box2ItemL" v-if="index % 2 == 0">
          <div class="box2ItemLT">{{ item.name }}</div>
          <div class="box2ItemLB" :style="onColor1(index)">
            {{ item.value }}<span>%</span>
          </div>
          <div class="box2ItemLD" :style="onColor(index)"></div>
        </div>
        <div class="box2ItemR" v-if="index % 2 != 0">
          <div class="box2ItemRT">{{ item.name }}</div>
          <div class="box2ItemRB" :style="onColor1(index)">
            {{ item.value }}<span>%</span>
          </div>
          <div class="box2ItemRD" :style="onColor(index)"></div>
        </div>
      </div>
      <div class="Box2Beij">
        <pieChartEcahrts :pieChartObj="pieChartObj" />
      </div>
    </div>
    <div class="equipmentStatistics-box3">
      <div class="Box3Item">
        <div class="Ltit">在线: &nbsp;</div>
        <div class="Rnei">
          0000
          <span>台</span>
        </div>
      </div>
      <div class="Box3Item">
        <div class="Ltit">离线: &nbsp;</div>
        <div class="Rnei">
          0000
          <span>台</span>
        </div>
      </div>
      <div class="Box3Item">
        <div class="Ltit">故障: &nbsp;</div>
        <div class="Rnei">
          0000
          <span>台</span>
        </div>
      </div>
      <div class="Box3Item">
        <div class="Ltit">预警: &nbsp;</div>
        <div class="Rnei">
          0000
          <span>台</span>
        </div>
      </div>
    </div>
    <div class="equipmentStatistics-box4">
      <div class="Box4Item">
        <div class="Box4ItemT">杀虫仓实时温度</div>
        <div class="Box4ItemB">13.3℃</div>
      </div>
      <div class="Box4Item">
        <div class="Box4ItemT">烘干仓实时温度</div>
        <div class="Box4ItemB">13.3℃</div>
      </div>
      <div class="Box4Item">
        <div class="Box4ItemT">降雨状态</div>
        <div class="Box4ItemB">13.3℃</div>
      </div>
      <div class="Box4Item">
        <div class="Box4ItemT">光照度</div>
        <div class="Box4ItemB">13.3℃</div>
      </div>
    </div>
    <div class="equipmentStatistics-box5">
      <div class="Box5Item" v-for="item in shebeiFkList">
        <div class="box5L">{{ item.name }}</div>
        <div class="box5RA" v-if="item.isShow"></div>
        <div class="box5RB" v-if="!item.isShow"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import pieChartEcahrts from "@/components/NdPieCharts.vue"
import { ref } from "vue"

const pieChartObj = ref({
  radius: ["0%", "100%"],
  center: ["50%", "50%"],
  pieChartList: [
    {
      name: "气象监测",
      value: 30
    },
    {
      name: "水肥一体机",
      value: 40
    },
    {
      name: "墒情监测",
      value: 20
    },
    {
      name: "灌溉控制器",
      value: 44
    },
    {
      name: "孢子监测",
      value: 77
    },
    {
      name: "环控柜",
      value: 60
    },
    {
      name: "虫情监测",
      value: 20
    },
    {
      name: "杀虫灯",
      value: 10
    }
  ],
  colorList: [
    ["rgba(232, 95, 95,.5)", "rgba(232, 95, 95)"],
    ["rgba(69, 246, 190,.5)", "rgba(69, 246, 190)"],
    ["rgba(241, 158, 80,.5)", "rgba(241, 158, 80)"],
    ["rgba(102, 153, 255,.5)", "rgba(102, 153, 255)"],
    ["rgba(89, 197, 247,.5)", "rgba(89, 197, 247)"],
    ["rgba(42, 197, 197,.5)", "rgba(42, 197, 197)"],
    ["rgba(178, 102, 255,.5)", "rgba(178, 102, 255)"],
    ["rgba(222, 220, 111,.5)", "rgba(222, 220, 111)"]
  ]
})
const shebeiFkList = ref([
  {
    name: "诱虫灯状态：",
    isShow: true
  },
  {
    name: "杀虫控制：",
    isShow: false
  },
  {
    name: "虫雨挡板：",
    isShow: true
  },
  {
    name: "烘干控制：",
    isShow: true
  },
  {
    name: "移虫控制：",
    isShow: false
  },
  {
    name: "杀虫挡板：",
    isShow: true
  },
  {
    name: "烘干挡板：",
    isShow: false
  },
  {
    name: "震动装置：",
    isShow: true
  },
  {
    name: "补光灯：",
    isShow: false
  },
  {
    name: "摄像头：",
    isShow: true
  }
])

const onColor = (index) => {
  return `border: 5px solid ${pieChartObj.value.colorList[index][1]};`
}
const onColor1 = (index) => {
  return `color:${pieChartObj.value.colorList[index][1]};`
}
</script>
<style scoped lang="less">
.equipmentStatistics-box {
  background: url("@/assets/MaterialtankArea/XXC_SBGL_1@2x.png") no-repeat
    center;
  background-size: 100% 100%;
  background-color: rgba(15, 75, 63);
  position: relative;
  .equiStatisTit1 {
    position: absolute;
    left: 30px;
    top: 1px;
  }
  .equiStatisTit2 {
    position: absolute;
    left: 73px;
    top: 52px;
  }
  .equiStatisTit3 {
    position: absolute;
    left: 10px;
    top: 145px;
  }
  .equiStatisTit4 {
    position: absolute;
    left: 30px;
    top: 528px;
  }
  .equiStatisTit5 {
    position: absolute;
    left: 10px;
    top: 698px;
  }
  .equiStatisUnit1 {
    position: absolute;
    right: 60px;
    top: 52px;
    color: #ffffff;
    font-size: 16px;
  }
  .equiStatisUnit2 {
    font-weight: 600;
    position: absolute;
    right: 80px;
    top: 47px;
    font-size: 22px;
    color: #59f9e1;
  }
  .equipmentStatistics-box1 {
    width: 372px;
    height: 30px;
    position: absolute;
    left: 13px;
    top: 100px;
    display: flex;
    .Box1Item {
      width: 50%;
      height: 30px;
      line-height: 30px;
      background: url("@/assets/MaterialtankArea/BJ_YXSL@2x.png") no-repeat
        center;
      background-size: 100% 100%;
      display: flex;
      box-sizing: border-box;
      position: relative;
      .Box1Itemleft {
        margin-left: 15px;
        font-size: 14px;
        color: #ffffff;
      }
      .Box1Itemright {
        position: absolute;
        right: 20px;
        margin-right: 15px;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
  .equipmentStatistics-box2 {
    width: 372px;
    height: 210px;
    position: absolute;
    left: 13px;
    top: 175px;
    overflow-y: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .Box2Beij {
      position: absolute;
      left: 105px;
      width: 153px;
      height: 153px;
      background: url("@/assets/MaterialtankArea/BJ_SXT@2x.png") no-repeat
        center;
      background-size: 100% 100%;
    }
    .box2Item {
      width: 50%;
      height: 52px;
      display: flex;
      align-items: center;
      position: relative;
      .box2ItemL {
        width: 72px;
        height: 43px;
        position: absolute;
        left: 0;
        .box2ItemLT {
          width: 72px;
          height: 21px;
          line-height: 21px;
          color: #ffffff;
          font-size: 14px;
        }
        .box2ItemLB {
          width: 72px;
          height: 21px;
          line-height: 21px;
          color: #ffffff;
          font-size: 14px;
          position: absolute;
          text-align: right;
          right: 15px;
          font-weight: 600;
        }
        .box2ItemLD {
          width: 8px;
          height: 8px;
          background-color: #fff;
          position: absolute;
          right: 1px;
          top: 17px;
          box-sizing: border-box;
          // border: 2px solid pink;
          border-radius: 5px;
        }
      }
      .box2ItemR {
        width: 86px;
        height: 43px;
        position: absolute;
        right: 0;
        .box2ItemRT {
          width: 72px;
          height: 21px;
          line-height: 21px;
          color: #ffffff;
          font-size: 14px;
          // text-align: right;
          margin-left: 15px;
        }
        .box2ItemRB {
          width: 72px;
          height: 21px;
          line-height: 21px;
          color: #ffffff;
          font-size: 14px;
          position: absolute;
          text-align: left;
          left: 15px;
          font-weight: 600;
        }
        .box2ItemRD {
          width: 8px;
          height: 8px;
          background-color: #fff;
          position: absolute;
          left: 1px;
          top: 17px;
          box-sizing: border-box;
          border: 2px solid pink;
          border-radius: 5px;
        }
      }
      span {
        font-weight: 400;
      }
    }
  }
  .equipmentStatistics-box3 {
    width: 372px;
    height: 100px;
    position: absolute;
    left: 13px;
    top: 400px;
    background: url("@/assets/MaterialtankArea/BJ_ZT@2x.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;

    .Box3Item {
      width: 50%;
      height: 50%;
      display: flex;
      align-items: center;
      .Ltit {
        margin-left: 60px;
        font-size: 14px;
        color: #badedb;
      }
      .Rnei {
        font-size: 18px;
        font-weight: 500;
        color: #fff;
      }
      span {
        font-size: 14px;
        font-weight: 400;
        color: #badedb;
      }
    }
  }
  .equipmentStatistics-box4 {
    width: 380px;
    height: 112px;
    position: absolute;
    left: 9px;
    top: 575px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .Box4Item {
      width: 185px;
      height: 52px;
      background: url("@/assets/MaterialtankArea/BJ_YCDSB@2x.png") no-repeat
        center;
      background-size: 100% 100%;
      .Box4ItemT {
        font-size: 14px;
        color: #badedb;
        text-align: center;
      }
      .Box4ItemB {
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        text-align: center;
      }
    }
  }
  .equipmentStatistics-box5 {
    width: 380px;
    height: 232px;
    position: absolute;
    left: 9px;
    top: 725px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .Box5Item {
      width: 185px;
      height: 38px;
      display: flex;
      color: #ffffff;
      align-items: center;
      background: url("@/assets/MaterialtankArea/BJ_KG@2x.png") no-repeat center;
      background-size: 100% 100%;
      .box5L {
        width: 50%;
        height: 100%;
        line-height: 38px;
        font-size: 14px;
        text-align: right;
      }
      .box5RA {
        cursor: pointer;
        margin-left: 5px;
        width: 56px;
        height: 24px;
        line-height: 38px;
        background: url("@/assets/MaterialtankArea/KG_K@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .box5RB {
        margin-left: 5px;
        cursor: pointer;
        width: 56px;
        height: 24px;
        line-height: 38px;
        background: url("@/assets/MaterialtankArea/KG_G@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
